/**
 *  @component
 *  @订单页面切换组件
 */
import React, { Component } from 'react';
import { Dimensions, StyleSheet, View, Text } from 'react-native';

const { width, height } = Dimensions.get('window');

export default class SwitchBar extends Component {

  static defaultProps = {
    handle: Function,
  };

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  };

  titleClick = (count) => {
    this.setState({ count });
  };

  render() {
    return (
      <View style={styles.switchBox}>
        <View style={styles.switchBoxItem}>
          <Text
            onPress={()=>this.titleClick(0)}
            style={[styles.switchBoxItemName, (this.state.count === 0) ? styles.switchBoxItemNameSelected : '']}
          >全部</Text>
        </View>
        <View style={styles.switchBoxItem}>
          <Text
            onPress={()=>this.titleClick(1)}
            style={[styles.switchBoxItemName, (this.state.count === 1) ? styles.switchBoxItemNameSelected : '']}
          >待支付</Text>
        </View>
        <View style={styles.switchBoxItem}>
          <Text
            onPress={()=>this.titleClick(2)}
            style={[styles.switchBoxItemName, (this.state.count === 2) ? styles.switchBoxItemNameSelected : '']}
          >待入住</Text>
        </View>
        <View style={styles.switchBoxItem}>
          <Text
            onPress={()=>this.titleClick(3)}
            style={[styles.switchBoxItemName, (this.state.count === 3) ? styles.switchBoxItemNameSelected : '']}
          >退款订单</Text>
        </View>
      </View>
    );
  };
};

const styles = StyleSheet.create({
  switchBox: {
    width,
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  switchBoxItem: {
    width: width / 4,
    alignItems: 'center',
  },
  switchBoxItemName: {
    fontSize: 15,
    color: '#222222',
    textAlign: 'center',
    paddingTop: 5,
    paddingBottom: 5,
  },
  switchBoxItemNameSelected: {
    color: '#0766f1',
    borderBottomWidth: 2,
    borderBottomColor: '#0766f1'
  }
});